<template>
    <view>
        <view v-if="value" class="a-popup-mask" @click="onMaskClick"></view>

        <view class="a-popup " :class="myClass" :style="{height:'auto',width:width}" v-if="header">
            <view class="a-flex-space-between a-popup-title a-border-bottom">
                <view class="a-left-bt" @click="hide">取消</view>
                <view>
                    {{title}}
                </view>
                <view class="a-right-bt" @click="onRightClick">确定</view>
            </view>
            <view class="a-popup-body has-header" :style="{height:height}">
                <slot></slot>
            </view>
        </view>
        <view class="a-popup" :class="myClass" :style="{height:height,width:width}" v-else>
            <view class="a-popup-body">
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "my-popup",
        props: {           // 方向
            dir: {
                type: String,
                default: 'bottom'
            },

            value: {
                type: Boolean,
                default: false
            },
            // 宽度
            width: {
                type: String,
                default: '100%'
            },
            // 高度
            height: {
                type: String,
                default: '100vh'
            },
            // 点击遮罩是否关闭
            maskClose: {
                type: Boolean,
                default: true
            },
            // 标题
            title: {
                type: String
            },
            //是否显示头部
            header: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            show() {
                this.$emit('input', true);
            },
            hide() {
                this.$emit('input', false);
                this.$emit('cancel');
            },
            onMaskClick() {
                if (this.maskClose) {
                    this.hide();
                }
            },
            /**
             * 点击确定
             */
            onRightClick() {
                this.$emit('confirm');
            }
        },
        computed: {
            myClass() {
                const list = [];
                list.push(`a-popup-${this.dir}`);
                if (this.value) {
                    list.push('a-popup-show');
                }
                return list
            }
        }
    }
</script>

<style scoped lang="less">
    .a-popup-title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        line-height: unit(80, upx);
        font-size: unit(32, upx);
        background-color: white;
        z-index: 999999999;

        .a-left-bt {
            color: #999999;
            padding: 0 unit(24, upx);
        }

        .a-right-bt {
            color: orange;
            padding: 0 unit(24, upx);
        }
    }

    .has-header {
        padding-top: unit(80, upx);
        overflow-y: scroll;
    }
</style>
